<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>用户聊天</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <header th:replace="header::html"></header>


    <!-- Bootstrap css-->
    <link  th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" media="screen">
    <link th:href="@{/bootstrap/css/bootstrap-responsive.css}"  rel="stylesheet">

    <link   th:href="@{/css/chat.css}" rel="stylesheet">

    <!-- Bootstrap js-->
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <script  th:src="@{/bootstrap/js/bootstrap.min.js}"></script>


    <script type="text/javascript"  th:src="@{/js/jquery-1.4.min.js}"></script>
    <script type="text/javascript">
		var $jq = $.noConflict(true);
    </script>

    <!-- 感谢网友 @水墨寒 编写的css和js文件 -->
    <link   th:href="@{/emoj/smohan.face.css}" type="text/css" rel="stylesheet">
    <script  th:src="@{/emoj/smohan.face.js}"  charset="utf-8"></script>

    <script type="text/javascript"  th:src="@{/js/ajaxfileupload.js}"></script>
    <script type="text/javascript"  th:src="@{/js/chat.js}"></script>
    <script type="text/javascript"  th:src="@{/js/groupfile.js}"></script>
    <script type="text/javascript"  th:src="@{/js/records.js}"></script>
    <script type="text/javascript"  th:src="@{/js/ucard.js}"></script>
</head>
<body onLoad="startWebSocket()">

<div class="container-fluid">
<div class="row-fluid maincontent" style="padding-top:40px">
<div class="span2 offset1">

    <div id="userlist" style="height: 330px;margin-top: 62px;padding-top: 80px;width: 185px">
        <input type="text" id="nickname" placeholder="请输入您的匿名昵称" style="width: 140px;margin-left:12px;margin-top:-85px" />
        <button onclick="conectWebSocket()" class="btn btn-success" style="margin-left:40px">连接聊天室</button>
        <br>
        <br>
        <br>
        <input type="text" id="toUser" placeholder="请输入你要私聊人的房间号" style="width: 167px" />


        <button onclick="closeWebSocket()" class="btn btn-success" style="margin-top:100px;margin-left:42px">断开连接</button>



    </div>
</div>
<!-- 存放接收到的消息. -->
<div class="span7" id="board" >
    <div class="row">
        <legend id="nowchat">群聊</legend>
        <form class="form-message" id="form">
            <fieldset>
                <div id="first">

                </div>

            </fieldset>
        </form>

    </div>

<div class="row">
    <div id="Smohan_FaceBox">

        <div>
							<textarea rows="2" id="newmessage" placeholder="快来冒个泡吧~"
                                      onkeydown="keySend(event)" class="smohan_text" ></textarea>

        </div>
        <button onclick="send()" class="btn btn-success">
            <i class="icon-comment icon-white"></i> 发送-->
        </button>
        <code id="sendkey" >Ctrl+Enter键发送</code>
    </div>
</div>
</div>

</div>
</div>


</body>
<script type="text/javascript">
	//连接对象.
	var websocket = null;
	var nickname = null;
	function conectWebSocket(){
		nickname = document.getElementById("nickname").value;
		if(nickname == ''){
			alert("请输入昵称");
			return;
		}
		//判断当前的浏览器是否支持websocket.
		if("WebSocket" in window){
			websocket = new WebSocket("ws://localhost:8080/websocket/"+nickname);
		}else{
			alert("Not support websocket");
			return false;
		}

		//连接成功的方法.
		websocket.onopen = function(event){
			setMessgeHtml("Loc MSG:连接成功");
		}

		//连接关闭.
		websocket.onclose = function(event){
			setMessgeHtml("Loc MSG:连接关闭");
			websocket.close();
		}

		//连接异常.
		websocket.onerror = function(event){
			setMessgeHtml("Loc MSG:连接异常");
		}


		websocket.onmessage = function(event){
			setMessgeHtml(event.data);
		}

	}


	function setMessgeHtml(msg){
		var message = document.getElementById("first");
		message.innerHTML += msg+"<br/>";
	}

	/**
	 发送消息.
	 */
	function send(){
		var message = document.getElementById("newmessage").value;
		var toUser = document.getElementById("toUser").value;
		var socketMsg = {msg:message,toUser:toUser};
		if(toUser == ''){
			socketMsg.type =0;//群聊.
		}else{
			socketMsg.type =1;//单聊.
		}

		//websocket.send(nickname+":"+message);
		websocket.send(JSON.stringify(socketMsg));//将json对象转换为json字符串.
	}


</script>
</html>

